<template>
  <view class="collect">
    <u-list @scrolltolower="scrolltolower">
      <view class="p-20">
        <template v-if="$store.state.goods.collectList.length">
          <view
            class="mb-20"
            v-for="(collect, index) in $store.state.goods.collectList"
            :key="index"
          >
            <u-list-item>
              <my-goods :data="collect.product"></my-goods
            ></u-list-item>
          </view>
        </template>
        <template v-else>
          <my-empty type="collect"></my-empty>
        </template>
      </view>
    </u-list>
  </view>
</template>

<script setup>
import { onReady, onShow } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { useStore } from "vuex";

const store = useStore();

const query = reactive({
  page: 1,
  size: 10,
});

const totalPage = ref(0);

async function getCollectList() {
  const result = await store.dispatch("fetchCollectList", query);
  if (result) {
    totalPage.value = result.total_page;
  }
}

function handleScanCode() {
  uni.scanCode({
    scanType: ["barCode"],
  });
}

function scrolltolower() {
  if (query.page < totalPage.value) {
    query.page += 1;
    getCollectList();
  }
}

onShow(async () => {
  await getCollectList();
});
</script>

<style lang="scss" scoped>
.collect {
  .filter {
    .input-wrapper {
      background-color: #f4f5f7;
    }
  }
}
</style>
